let code = {}
code.all = `
<style scoped>
</style>
<template>
  <Form
    slot="demo"
    label-position="left"
    :label-width="120"
    ref="formDemo"
    :model="formDemoData"
    :rules="formDemoRule">
    <FormItem label="User Name" prop="name">
      <Input
        type="text"
        prefix="md-volume-off"
        v-model="formDemoData.name"
        placeholder="USER NAME"
        @on-enter="inputEvents"
        @on-click="inputEvents"
        @on-change="inputEvents"
        @on-focus="inputEvents"
        @on-blur="inputEvents"
        @on-keyup="inputEvents"
        @on-keydown="inputEvents"
        @on-keypress="inputEvents"
        @on-search="inputEvents"
        @on-clear="inputEvents">
      </Input>
    </FormItem>
    <FormItem label="Age" prop="age">
      <Input
        type="number"
        v-model="formDemoData.age"
        placeholder="0"
        step="1" >
      </Input>
    </FormItem>
    <FormItem label="Birth" prop="birth">
      <DatePicker
        type="date"
        placeholder="2000-01-01"
        v-model="formDemoData.birth" >
      </DatePicker>
    </FormItem>
    <FormItem label="Education" prop="education">
      <Select v-model="formDemoData.education">
        <Option value="Bachelor">Bachelor</Option>
        <Option value="Master">Master</Option>
        <Option value="Doctor">Doctor</Option>
      </Select>
    </FormItem>
    <FormItem label="Sex" prop="sex">
      <RadioGroup v-model="formDemoData.sex">
        <Radio label="male">
          <Icon type="md-male"></Icon>
          <span>Male</span>
        </Radio>
        <Radio label="female">
          <Icon type="md-female"></Icon>
          <span>Female</span>
        </Radio>
        <Radio label="other">
          <Icon type="md-help"></Icon>
          <span>Unknown</span>
        </Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="Lang & Projects">
      <Cascader :data="projects" v-model="formDemoData.project"></Cascader>
    </FormItem>
    <FormItem label="Married" prop="married">
      <i-switch v-model="formDemoData.married" size="large" >
        <span slot="open">已婚</span>
        <span slot="close">未婚</span>
      </i-switch>
    </FormItem>
    <FormItem label="Wives">
      <CheckboxGroup v-model="formDemoData.wives">
        <Checkbox v-for="wife in wives" :label="wife.name" :key="wife.name">
          <Icon :type="wife.icon"></Icon>
          <span>{{ wife.name }}</span>
        </Checkbox>
      </CheckboxGroup>
    </FormItem>
    <FormItem label="Think">
      <AutoComplete
        v-model="formDemoData.think"
        :data="thinkOption"
        @on-search="autoThink"
        :filter-method="filterMethod"
        icon="ios-thunderstorm">
      </AutoComplete>
    </FormItem>
    <FormItem label="Proficiency">
      <Slider
        range
        :max="10"
        :min="0"
        v-model="formDemoData.proficiency"
        :marks="marks"
        :tip-format="sliderFormat"></Slider>
    </FormItem>
    <FormItem label="Rating" prop="rating">
      <Rate
        v-model="formDemoData.rating"
        allow-half
        icon="ios-heart"
        show-text
        :count="6"
      ></Rate>
    </FormItem>
    <FormItem label="Avatar">
      <Upload
        action="http://test.th6188.com/test/upload"
        type="drag"
        :headers="uploadHeaders"
        :on-success="uploadSuccess"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" :size="52" color="#3399ff"></Icon>
          <p>Click or Drag files here to upload</p>
        </div>
<!--              <Button icon="ios-cloud-upload-outline">Upload Files</Button>-->
      </Upload>
    </FormItem>
    <FormItem label="BgColor">
      <ColorPicker v-model="formDemoData.bgColor" alpha recommend></ColorPicker>
    </FormItem>
    <FormItem label="Intro">
      <Input
        type="textarea"
        :rows="3"
        clearable
        :maxlength="140"
      ></Input>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data: () => {
    return {
      drawerLeft: false,
      formDemoData: {
        name: 'Dapianzi Carl',
        age: 31,
        sex: 'female',
        birth: '1989-07-29',
        project: ['javascript', 'nodejs', 'nuxt'],
        education: 'Master',
        married: true,
        wives: ['Valerie', 'Snow', 'Nancy'],
        intro: 'Love movies, games, mathematics, physics, astronomy',
        proficiency: [3, 6],
        rating: 4.5,
        think: '',
        avatar: '',
        bgColor: '#FFBA00'
      },
      formDemoRule: {
        name: [
          {
            required: true, message: 'The name cannot be empty', trigger: 'blur'
          },
          {
            asyncValidate: (rule, value, callback) => {
              console.log(rule);
              this.$axios.get('http://test.th6188.com/test/mock', function(res) {
                console.log(res);
                callback(value, res)
              })
            }, message: 'Invalidate name', trigger: 'change'
          },
         ],
        age: [
          {
            required: true, message: 'R18 sensitive', trigger: 'blur'
          }
        ],
        sex: '',
        birth: '',
        project: '',
        education: '',
        married: '',
        intro: '',
        proficiency: '',
        rating: '',
        avatar: '',
        bgColor: ''
      },
      wives: [
        { name: 'Valerie', icon: 'logo-vimeo' },
        { name: 'Snow', icon: 'ios-snow' },
        { name: 'Carrie', icon: 'md-cloud' },
        { name: 'Nancy', icon: 'md-game-controller-b' }
      ],
      thinkOption: [],
      marks: {
        0: 'A cup',
        3: 'D cup',
        6: 'G cup',
        8: 'I cup'
      },
      uploadHeaders: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST'
      }
    }
  },
  methods: {
    inputEvents (event, obj) {
      console.log(event, obj)
      this.$Notice.info({ title: '['+event.type+'] Triggered' })
    },
    filterMethod (value, option) {
      return option.name.indexOf(value) >= 0
    },
    autoThink: function (value) {
      this.thinkOption = !value ? [] : [
        { name: value },
        { name: value + value },
        { name: value + value + value }
      ]
    },
    sliderFormat (val) {
      return String.fromCharCode(65 + parseInt(val)) + ' Cup'
    },
    uploadSuccess (res, file, fileList) {
      console.log(res)
      if (res.code === 0) {
        this.$Notice.success({ title: res.data.src })
      } else {
        this.$Norice.error(res.msg)
      }
    }
  }
}
</script>`
export default code
